<template>
	<view class="my">
		<!-- 我的 -->
		<view class="my-nav">
			<!-- 头部 -->
			<view class="myNavContent" @tap="inredeem(0)">
				<view class="my-avatar">
					<image src="../../static/images/list/goodsList/chuifengji.jpg" mode=""></image>
				</view>
				<view class="my-userinfo">
					<view class="my-nickName">微信用户</view>
					<view class="my-coins">当前回收币：0</view>
				</view>
				<view class="withdrawal">
					<view @tap="withdrawal" class="withdrawal-text">提现</view>
				</view>
			</view>
		</view>
		<!-- 累计回收币/累计下单 -->
		<view class="accumulate">
			<view class="accumulate-box">
				<!-- 累计回收币 -->
				<view class="accumulate-order">
					<view class="accumulateCount">0.00</view>
					<view class="accumulateText">累计回收币</view>
				</view>
				<!-- 累计下单 -->
				<view class="accumulate-order">
					<view class="accumulateCount">0</view>
					<view class="accumulateText">累计下单</view>
				</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="my-content">
			<view class="myContent-title">
				<text>回收订单</text>
			</view>
			<view class="content">
				<view class="content-icon" :class="index===3?'boxEnd':'boxbefor'" v-for="(item,index) in orderList" :key="index" @tap="inrecycling(index)">
					<view class="icon iconfont" :class="item.icon"></view>
					<view class="contentText">{{item.text}}</view>
				</view>
			</view>
		</view>
		<!-- 兑换订单 -->
		<view class="my-content">
			<view class="myContent-title">
				<text>兑换订单</text>
			</view>
			<view class="content">
				<view class="content-icon" @tap="inredeem(0)">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/delivered@3x.png" mode=""></image>
					</view>
					<view class="contentText">待发货</view>
				</view>
				<view class="content-icon" @tap="inredeem(1)">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/received@3x.png" mode=""></image>
					</view>
					<view class="contentText">待收货</view>
				</view>
				<view class="content-icon" @tap="inredeem(2)">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/order-completed@3x.png" mode=""></image>
					</view>
					<view class="contentText">已完成</view>
				</view>
				<view class="content-icon"></view>
			</view>
		</view>
		<!-- 更多服务 -->
		<view class="my-content">
			<view class="myContent-title">
				<text>兑换订单</text>
			</view>
			<view class="content">
				<!-- <view class="content-icon">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my1.png" mode=""></image>
					</view>
					<view class="contentText">回收员中心</view>
				</view> -->
				<view class="content-icon" @tap="cityRecycle">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my2.png" mode=""></image>
					</view>
					<view class="contentText">城市回收站</view>
				</view>
				<!-- <view class="content-icon">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my3.png" mode=""></image>
					</view>
					<view class="contentText">城市合伙人</view>
				</view> -->
				<view class="content-icon" @tap="inspread">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my4.png" mode=""></image>
					</view>
					<view class="contentText">推广中心</view>
				</view>
				<view class="content-icon" @tap="inAddress">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my5.png" mode=""></image>
					</view>
					<view class="contentText">地址管理</view>
				</view>
				<view class="content-icon" @tap="inPersonal">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my6.png" mode=""></image>
					</view>
					<view class="contentText">个人中心</view>
				</view>
				<view class="content-icon" @tap="inauthLogin">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my7.png" mode=""></image>
					</view>
					<view class="contentText">管理员登录</view>
				</view>
				<view class="content-icon">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my8.png" mode=""></image>
					</view>
					<view class="contentText">关于我们</view>
				</view>
				<view class="content-icon"></view>
			</view>
		</view>
		<!-- tabbar -->
		<tabBar currentPage="my"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/component/commen/tabbar.vue"//引入底部组件
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				orderList:[
					{
						id:0,
						icon:"icon-yuyue",
						text:"已预约"
					},{
						id:1,
						icon:"icon-jiedan",
						text:"已接单"
					},{
						id:2,
						icon:"icon-yiwancheng",
						text:"已完成"
					},{
						id:3,
						icon:"icon-rili",
						text:"定期回收"
					}
				],
			};
		},
		methods:{
			withdrawal(){//点击提现按钮
				uni.navigateTo({
					url:"/otherPages/cash/cash"
				})
			},
			inredeem(e){//点击跳转至兑换中心页面
				uni.navigateTo({
					url:`/otherPages/redeem-order/redeem-order?tabbarIndex=${e}`
				})
			},
			inrecycling(e){//点击跳转至回收订单页面
				if(e!=3){//如果是定期回收则重新跳转至定期回收页面
					uni.navigateTo({
						url:`/otherPages/recycling-orders/recycling-orders?tabbarIndex=${e}`
					})
				}else{
					
				}
			},
			inAddress(){//点击地址管理
				uni.navigateTo({
					url:"/otherPages/address-management/address-management"
				})
			},
			inPersonal(){//点击个人中心
				uni.navigateTo({
					url:"/otherPages/personal/personal"
				})
			},
			inauthLogin(){//点击管理员登录
				if(uni.getStorageInfoSync("isauthLogin")){//登录过
					uni.navigateTo({//跳转到平台统计
						url:"/otherPages/census/statistics/statistics"
					})
				}else{//本地没有登录过，跳转到管理员登录页面
					uni.navigateTo({
						url:"/otherPages/authLogin/authLogin"
					})
				}
			},
			inspread(){//点击推广中心
				uni.navigateTo({
					url:"/otherPages/spread/spread"
				})
			},
			cityRecycle(){//点击城市回收站
				if(uni.getStorageSync("packid")){
					uni.navigateTo({
						url:"/otherPages/cityRecycle/cityRecycle"
					})
				}else{
					uni.navigateTo({
						url:"/otherPages/cityRecycleLogin/cityRecycleLogin"
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my{
		padding-bottom: 150rpx;
		font-size: 29rpx;
		// 头部我的信息
		.my-nav{
			width: 100%;
			height: 300rpx;
			// border: 1px solid #000;
			background: url("https://huishou.68699.cn/addons/wjyk_recycle/public/images/user-background.png") no-repeat;
			background-size: 100%;
			padding: 50rpx 40rpx;
			box-sizing: border-box;
			.myNavContent{
				display: flex;
				align-items: center;
				.my-avatar{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.my-userinfo{
					.my-nickName{
						font-weight: bold;
					}
					.my-coins{
						font-size: 27rpx;
						margin-top: 9rpx;
						color: #737373;
					}
				}
				.withdrawal{
					// border: 1px solid #000;
					flex: 1;
					font-size: 28rpx;
					.withdrawal-text{
						margin-left: auto;
						// border: 1px solid #f00;
						background: #00b287;
						width: 35%;
						color: #fff;
						text-align: center;
						padding: 9rpx 0;
						border-radius: 20rpx;
					}
				}
			}
		}
		// 累计回收币/累计下单
		.accumulate{
			// border: 1px solid #f00;
			margin-top: -80rpx;
			width: 100%;
			// height: 10vh;
			.accumulate-box{
				text-align: center;
				padding: 30rpx 130rpx;
				box-sizing: border-box;
				width: 95%;
				height: 100%;
				background: #fff;
				margin: 0 auto;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				.accumulate-order{
					// border: 1px solid #f00;
					font-size: 28rpx;
					.accumulateText{
						margin-top: 10rpx;
					}
				}
			}
		}
		// 主体内容部分
		.my-content{
			margin-top: 20rpx;
			background: #fff;
			padding: 40rpx 0;
			.myContent-title{
				font-weight: bold;
				font-size: 28rpx;
				
				// border: 1px solid #000;
				padding: 0 30rpx 20rpx 30rpx;
				border-bottom: 2rpx solid #e5e5e5;
			}
			.content{
				// margin-top: 2vh;
				padding: 0 30rpx;
				// border: 1px solid #f00;
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				.content-icon{
					// margin: 0 auto;
					text-align: center;
					margin-top: 40rpx;
					width: 24%;
					// border: 1px solid #f00;
					.iconfont{
						font-size: 63rpx;
					}
					.contentText{
						margin-top: 10rpx;
						font-size: 27rpx;
					}
					.content-img{
						width: 55rpx;
						height: 55rpx;
						margin: 0 auto;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.boxEnd{
					// font-weight: bold;
					// border: 2rpx solid #f00;
					border-left:2rpx solid #cfcfcf;
				}
				.boxbefor{
					color: #737373;
				}
			}
		}
	}
</style>
